<!--  -->
<template>
<div class='attention' v-for="item in data.list" :key="item.id">
  <div class="username-img">
    <div class="headportrait">
      <img src="https://ftp.bmp.ovh/imgs/2021/02/635c26d0169cc1ec.png" class="myHomeUserImg" alt="">
    </div>
    <div>
      <p>{{ item.username }}</p>
      <span>{{ item.iphonenum }}</span>
    </div>
  </div>
  <div>
    <el-button
    type="danger"
    icon="el-icon-close"
    circle
    @click="clickBtn(item.id)"
    ></el-button>
  </div>
</div>
</template>

<script lang='ts'>

import { defineComponent, onMounted } from 'vue'
// import getAttentionFunAll from '@/use/presonalCenter/attention/attentiom.ts'
import getAttentionFunAll from '../../../../use/presonalCenter/attention/attentiom'

export default defineComponent({
  name: '',
  props: {
    msg: String
  },

  setup () {
    // 属性
    const {
      data
    } = getAttentionFunAll()
    // 方法
    const {
      requextAtt,
      clickBtn
    } = getAttentionFunAll()

    onMounted(() => {
      requextAtt()
    })
    return {
      data,
      clickBtn
    }
  }
})
</script>

<style scoped lang='scss'>
img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  align-items: center;
}
.attention{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  box-shadow: 0px 1px 18px rgba(90, 90, 90,.2);
  border-radius: 20px;
  margin-top: 30px;
  border: 1px solid rgba(90, 90, 90,.1);
  transition: all 3s;
}
.username-img{
  display: flex;
  .headportrait{
    margin-right: 10px;
  }
  p{
    margin-bottom: 5px;
  }
  span{
    color: rgb(104, 104, 104);
  }
}
</style>
